
Ext.define('MobileTest.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires: [
        'MobileTest.view.NavTabView',
        'Ext.layout.container.Border'
    ],
	layout: 'border',
	items: [{
                region:'north',
                margins:'0 0 0 0',
                contentEl: 'north',
                border:false,
                height:60,
                bodyStyle:""
            },{
                region:'center',
                layout:'border',                      
                margins:'0 5 5 5',
                border:false,
                items:[{
                   	region: 'north',
					xtype: 'viewer'
                },{
                    id:'mainContent',
                    region:'center',
                    layout:'border',
                    border:true,                    
                    items:[
                    	{
                			title: 'Accordion',
                			collapsible: true,
                			region:'west',
                			margins:'5 0 5 5',
                			split:true,
                			width: 210,
                			layout:'accordion',
                			items: [
                				{
                					title: 'Accordion Item 2',
                					html: '&lt;empty panel&gt;',
                					cls:'empty'
            					},{
                					title: 'Accordion Item 3',
                					html: '&lt;empty panel&gt;',
                					cls:'empty'
            					},{
                					title: 'Accordion Item 4',
                					html: '&lt;empty panel&gt;',
                					cls:'empty'
            					}]
            			},{
                    		region:'center',
                    		margins:'5 5 5 0',
                    		cls:'empty',
                    		layout:'fit',
                    		bodyStyle:'background:#f1f1f1',
                    		//html:'<iframe frameborder="0" width="100%" height="100%" name="view" src="" scrolling="auto"></iframe>'
                    		html:'<br/><br/>&lt;empty center panel&gt;'
                		}
            			
                    ]
                }]
            }]
});

